<template>
  <div class="app-container">
    <el-container style="margin-left: 16px; margin-top: 16px" v-loading="loading">
      <el-aside width="200px" style="border-right: 1px solid #eee; background-color: rgb(255, 255, 255)">
        <h5 style="text-align: center">仓储管理器</h5>
        <el-menu :default-active="selectedRepository" @select="handleSelectRepository" style="border: none">
          <el-menu-item v-for="(re, index) in repositoryList" :key="index" :index="re">
            <template #title>
              <span>{{ re }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 把所有字段都生成了，先删除不要的字段，再做定制化 -->
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="120px">
          <el-form-item label="表名" prop="nameLike">
            <el-input v-model="queryParams.nameLike" placeholder="请输入表名" clearable size="small"
              style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="描述" prop="descLike">
            <el-input v-model="queryParams.descLike" placeholder="请输入描述" clearable size="small"
                      style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="请求路径" prop="requestPath">
            <el-input v-model="queryParams.requestPath" placeholder="请输入请求路径" clearable size="small"
                      style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <search-button @click="handleQuery" :perm="['system:mda:search']" />
            <reset-button @click="resetQuery" :perm="['system:mda:search']" />
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :perm="['system:mda:search']" />
        </el-row>

        <!-- 把所有字段都生成了，先删除不要的字段，再做定制化 -->
        <el-table v-loading="loading" :data="dataList">
          <el-table-column label="表名" prop="name" align="center" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="是否主实体" prop="primary" align="center" :show-overflow-tooltip="true" min-width="80">
            <template #default="scope">
              <yes-no-tag v-model:value="scope.row.primary" :yes-value="true"></yes-no-tag>
            </template>
          </el-table-column>
          <el-table-column label="仓库名" prop="repository" align="center" :show-overflow-tooltip="true" min-width="100">
            <template #default="scope">
              {{ scope.row.repository ? scope.row.repository.name : '默认' }}
            </template>
          </el-table-column>
          <el-table-column label="请求路径" prop="requestPath" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="类名" prop="clazz" :show-overflow-tooltip="true" min-width="200" />
          <el-table-column label="属性列数量" prop="mdaColumns" align="center" width="100">
            <template #default="scope">
              <text-button :text="scope.row.mdaColumns.length" @click="openColumnDialog(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="子模型数量" prop="mdaSubTables" align="center" width="100">
            <template #default="scope">
              <text-button :text="scope.row.mdaSubTables.length" @click="openSubTablesDialog(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </el-main>
    </el-container>

    <!-- 属性列弹窗 -->
    <drag-dialog :title="columnDialog.title" :close-on-click-modal="false" v-model="columnDialog.open" width="80%" append-to-body>
      <el-table v-loading="loading" :data="columnDialog.pageColumnList">
        <el-table-column label="属性名" align="center" prop="property" :show-overflow-tooltip="true" min-width="150" />
        <el-table-column label="列名" align="center" prop="name" :show-overflow-tooltip="true" min-width="150" />
        <el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" min-width="180" />
        <el-table-column label="默认值" align="center" prop="defaultValue" width="120" />
        <el-table-column label="是否主键" align="center" prop="key" width="120">
          <template v-slot="scope">
            <yes-no-tag v-model:value="scope.row.key" :yes-value="true"></yes-no-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否查询属性" align="center" prop="query" width="120">
          <template v-slot="scope">
            <yes-no-tag v-model:value="scope.row.query" :yes-value="true"></yes-no-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否为空" align="center" prop="null" width="120">
          <template v-slot="scope">
            <yes-no-tag v-model:value="scope.row.null" :yes-value="true"></yes-no-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否删除标志位" align="center" prop="delete" width="120">
          <template v-slot="scope">
            <yes-no-tag v-model:value="scope.row.delete" :yes-value="true"></yes-no-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属存储仓库" align="center" prop="table" width="120" />
        <el-table-column label="是否外键" align="center" prop="foreignKey" width="120">
          <template v-slot="scope">
            <yes-no-tag v-model:value="scope.row.foreignKey" :yes-value="true"></yes-no-tag>
          </template>
        </el-table-column>
        <el-table-column label="外键列名" align="center" prop="foreignName" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="外键描述" align="center" prop="foreignDesc" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="外键表名" align="center" prop="foreignTable" :show-overflow-tooltip="true" width="120" />
      </el-table>
      <pagination v-show="columnDialog.total > 0" :total="columnDialog.total" v-model:page="columnDialog.pageNum"
        v-model:limit="columnDialog.pageSize" @pagination="handleColumnPage" />
      <template #footer>
        <div class="dialog-footer" style="margin: 40px 30px 0 0">
          <el-button @click="closeColumnDialog">关 闭</el-button>
        </div>
      </template>
    </drag-dialog>

    <!-- 子模型弹窗 -->
    <drag-dialog :title="subTablesDialog.title" :close-on-click-modal="false" v-model="subTablesDialog.open" width="50%" append-to-body>
      <el-table v-loading="loading" :data="subTablesDialog.pageSubTableList">
        <el-table-column label="属性名" align="center" prop="property" :show-overflow-tooltip="true" min-width="150" />
        <el-table-column label="子模型名" prop="clazz" :show-overflow-tooltip="true" min-width="150" />
        <el-table-column label="关联类型" align="center" prop="association" min-width="120" />
      </el-table>
      <pagination v-show="subTablesDialog.total > 0" :total="subTablesDialog.total" v-model:page="subTablesDialog.pageNum"
                  v-model:limit="subTablesDialog.pageSize" @pagination="handleSubTablePage" />
      <template #footer>
        <div class="dialog-footer" style="margin: 40px 30px 0 0">
          <el-button @click="closeSubTablesDialog">关 闭</el-button>
        </div>
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { getRepositoryList, getMdaModuleByPage } from "@base/api/base/mda";
import { debounceWrapper } from "@/utils/zmids";
import YesNoTag from "@/components/Zmids/YesNoTag/index.vue"
import TextButton from '@/components/Zmids/Buttons/TextButton.vue';

export default {
  // 此处的名字需要与菜单中Path一致，否则多Tab页切换时会刷新
  name: 'BaseMda',
  components: {
    TextButton,
    'yes-no-tag': YesNoTag,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 仓库名称列表
      repositoryList: ['全部'],
      // 选中的仓储管理器
      selectedRepository: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 仓储管理器名称
        repository: '',
        // 表名
        nameLike: '',
        descLike: '',
        requestPath: ''
      },
      // 属性列弹框参数
      columnDialog: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        open: false,
        title: '属性列弹窗',
        columnList: [],
        pageColumnList: []
      },
      // 子模型弹框参数
      subTablesDialog: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        open: false,
        title: '子模型弹窗',
        subTableList: [],
        pageSubTableList: []
      }
    };
  },
  created() {
    // 获取仓库名称列表
    getRepositoryList().then(res => {
      this.repositoryList.push(...res.data);
      // 默认选中第一个管理器
      this.selectedRepository = this.repositoryList ? this.repositoryList[0] : '';
      // 查询列表
      this.getList();
    });
  },
  methods: {
    // 查询列表
    getList: debounceWrapper(function () {
      this.loading = true;
      this.queryParams.repository = this.selectedRepository === '全部' ? '' : this.selectedRepository;
      getMdaModuleByPage(this.queryParams).then(res => {
        this.dataList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      })
    }),
    // 仓储管理器选择触发事件
    handleSelectRepository: debounceWrapper(function(value) {
      this.selectedRepository = value;
      this.resetQuery();
    }),
    // 打开属性列弹框
    openColumnDialog:debounceWrapper(function(row){
      this.columnDialog.total = row.mdaColumns.length;
      this.columnDialog.columnList = row.mdaColumns;
      this.handleColumnPage();
      this.columnDialog.open = true;
    }),
    // 处理属性列分页
    handleColumnPage:debounceWrapper(function(){
      this.columnDialog.pageColumnList =
        this.paginate(this.columnDialog.columnList, this.columnDialog.pageSize, this.columnDialog.pageNum);
    }),
    // 打开子模型弹框
    openSubTablesDialog:debounceWrapper(function(row){
      this.subTablesDialog.total = row.mdaSubTables.length;
      this.subTablesDialog.subTableList = row.mdaSubTables;
      this.handleSubTablePage();
      this.subTablesDialog.open = true;
    }),
    // 处理子模型分页
    handleSubTablePage:debounceWrapper(function(){
      this.subTablesDialog.pageSubTableList =
        this.paginate(this.subTablesDialog.subTableList, this.subTablesDialog.pageSize, this.subTablesDialog.pageNum);
    }),
    // 分页函数
    paginate(array, page_size, page_number) {
      let start_index = (page_number - 1) * page_size;
      let end_index = page_number * page_size;
      if (end_index > array.length) {
        end_index = array.length;
      }
      return array.slice(start_index, end_index);
    },
    // 关闭属性列弹框
    closeColumnDialog:debounceWrapper(function(){
      this.columnDialog = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        open: false,
        title: '属性列弹窗',
        columnList: [],
        pageColumnList: []
      }
    }),
    // 关闭子模型弹框
    closeSubTablesDialog:debounceWrapper(function(){
      // 子模型弹框参数
      this.subTablesDialog = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        open: false,
        title: '子模型弹窗',
        subTableList: [],
        pageSubTableList: []
      }
    }),
    handleQuery:debounceWrapper(function(){
      this.queryParams.pageNum = 1;
      this.getList();
    }),
    resetQuery:debounceWrapper(function(){
      this.resetForm("queryForm");
      this.handleQuery();
    })
  }
}
</script>

<style lang="scss" scoped></style>